<template>
  <view class="big_box">
    <view class="bgc" :style="bgcHeight"></view>
    <view class="middle_box">
      <view class="ov_box">
        <view class="ov_list" v-for="(item, i) in overviewList" :key="i">
          <view class="ov_item" @click="gotoDetail(item)">
            <view class="img">
              <image :src="item.pic" mode="widthFix"></image>
            </view>
            <view class="small_box">
              <view class="name">{{item.name}}</view>
              <view class="description">{{item.description}}</view>
              <view class="prevent" @click.stop>
                <view class="collection" @click="collection(item)">
                  收藏
                </view>
                <view class="content" @click="gotoContact(item)">
                  立即联系
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 检查登录状态 判断是否显示底部登录功能 -->
      <view class=" bottom-login" v-if="token">
                  登录即可易物,在嘉易物,更有温度
                  <uni-tag text="去登录" circle="true"
                    custom-style="background-color: #ff8686; border: 1px solid #ff8686; font-size: 30rpx; padding: 8rpx 50rpx; position: fixed; right: 40rpx; bottom: 17rpx;"
                    @click="getToLogin"></uni-tag>
              </view>
            </view>
          </view>
</template>

<script>
  export default {
    data() {
      return {
        overviewList: [],
        ceshi: [],
        // 已有数据条数
        originallyData: 10,
        state: 0,
        bgcHeight: "",
        token: true
      };
    },
    onShow() {
      const checkToken = uni.getStorageSync('jiayi_token')
      if (checkToken) {
        this.token = false
      } else {
        this.token = true
      }
    },
    onLoad() {
      this.getOverviewList()
      uni.getSystemInfo({
        success: (res) => {
          this.bgcHeight = "height:" + res.windowHeight * 2 + "rpx;"
        }
      })
    },
    async onReachBottom() {
      if (this.state == 0) {
        const res = await uniCloud.database().collection("jiayi-message").orderBy('_id desc').where({
          state: "show"
        }).skip(this.originallyData).limit(10).get()
        if (res.result.data.length > 0) {
          res.result.data.map(x => {
            this.overviewList.push(x)
          })
          this.originallyData += 10
        } else {
          uni.showToast({
            title: "已经到底了噢",
            icon: "success",
            duration: 1500
          })
          this.state = 1
        }
      }
    },
    onPullDownRefresh() {
      this.getOverviewList()
      this.state = 0
      this.originallyData = 10
      setTimeout(function() {
        uni.stopPullDownRefresh();
        uni.showToast({
          title: "刷新成功",
          icon: "success",
          duration: 1000
        })
      }, 500);
    },
    methods: {
      async getOverviewList() {
        let res = await uniCloud.database().collection("jiayi-message").orderBy('_id desc').where({
          state: "show"
        }).limit(10).get()
        this.overviewList = res.result.data
      },
      gotoDetail(item) {
        uni.navigateTo({
          url: '/subpkg/detail/detail?_id=' + item._id
        })
      },
      // 收藏功能
      collection(item) {
        const openid = uni.getStorageSync('jiayi_openid')
        if (openid) {
          uniCloud.callFunction({
            name: 'getUser',
            data: {
              openID: openid
            },
            success: (res) => {
              this.overviewList.collection = res.result.data[0].collection
              if (this.overviewList.collection.indexOf(item._id) == -1) {
                // 数组里不存在该条数据则增加
                this.overviewList.collection.push(item._id)
                uniCloud.callFunction({
                  name: 'updateUser',
                  data: {
                    a: {
                      openID: openid
                    },
                    b: {
                      collection: this.overviewList.collection
                    }
                  },
                  success: () => {
                    uni.showToast({
                      title: "收藏成功",
                      icon: "success",
                      duration: 1500
                    })
                  }
                })
              } else {
                // 数组里存在这条数据
                uni.showToast({
                  title: "请勿重复收藏",
                  icon: "error",
                  duration: 1500
                })
              }
            }
          })
        } else {
          uni.navigateTo({
            url: '/subpkg/login/login'
          })
        }
      },
      gotoContact(item) {
        const token = uni.getStorageSync('jiayi_token')
        if (token) {
          uni.navigateTo({
            url: '/subpkg/contact/contact?openid=' + item.user_openid
          })
        } else {
          uni.navigateTo({
            url: '/subpkg/login/login'
          })
        }
      },
      getToLogin() {
        uni.navigateTo({
          url: '/subpkg/login/login'
        })
      }
    }
  }
</script>

<style lang="scss">
  .big_box {
    position: relative;

    .bgc {
      position: fixed;
      top: 0;
      z-index: 10;
      background: linear-gradient(to bottom, #ffbdbd, #f4f4f6);
      width: 760rpx;
    }

    .middle_box {
      position: absolute;
      top: 0;
      z-index: 11;

      .ov_box {
        .ov_list {
          width: 100%;
          height: 240rpx;
          margin-left: 16rpx;

          .ov_item {
            display: flex;
            margin-bottom: 2rpx;

            .img {
              text-align: center;
              margin-left: 16rpx;
              width: 220rpx;
              height: 220rpx;
              border-radius: 40rpx;
              overflow: hidden;

              image {
                width: 220rpx;
                max-height: 220rpx;
              }
            }

            .small_box {
              position: relative;
              margin-top: 20rpx;
              margin-left: 26rpx;
              width: 56%;
              .name {
                display: block;
                height: 40rpx;
                font-size: 28rpx;
                line-height: 40rpx;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                -webkit-box-orient: vertical;
              }

              .description {
                display: block;
                color: #aaaaaa;
                margin-top: 4rpx;
                height: 90rpx;
                line-height: 30rpx;
                font-size: 22rpx;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                line-clamp: 3;
                -webkit-box-orient: vertical;
              }

              .prevent {
                .collection {
                  position: absolute;
                  bottom: 15rpx;
                  right: 250rpx;
                  text-align: center;
                  background-color: #ffc1c1;
                  border: 1px solid #fcb7b7;
                  border-radius: 40rpx;
                  font-size: 24rpx;
                  color: #fff;
                  width: 150rpx;
                  height: 38rpx;
                  line-height: 38rpx;
                }

                .content {
                  position: absolute;
                  bottom: 15rpx;
                  right: 60rpx;
                  text-align: center;
                  background-color: #ffc1c1;
                  border: 1px solid #fcb7b7;
                  border-radius: 40rpx;
                  font-size: 24rpx;
                  color: #fff;
                  width: 150rpx;
                  height: 38rpx;
                  line-height: 38rpx;
                }
              }
            }
          }
        }
      }

      .bottom-login {
        position: fixed;
        display: flex;
        bottom: 0;
        width: 100%;
        height: 80rpx;
        font-size: 32rpx;
        line-height: 80rpx;
        padding-left: 40rpx;
        background-color: #fff;
        color: #ff8686;
      }
    }
  }
</style>
